{% load static %}
{% load bootstrap4 %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'js/jquery.min.js' %}"></script>

</head>
<style>

h1, h2 {
  text-align: center;
}
</style>
<body>
<h1 class="text-center">大盘指数</h1>
    <a href="/stock/" class="btn btn-primary">返回主页</a>

<div class="container">
    <div class="row">
        <h2 class="text-center">上证指数</h2>
        <div class="col-md-6">
            <div id="chart1" style="width: 100%; height: 400px;"></div>
        </div>

        <h2 class="text-center">深证指数</h2>
        <div class="col-md-6">
            <div id="chart2" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/stock/chart/marketline/",  // 这里要修改成你的路由
            type: "GET",
            dataType: "json",
            success: function (data) {
                console.log(data)

                {#var sh_legend = JSON.stringify(data.sh_legend);#}
                {#var sh_x_axis = JSON.stringify(data.sh_x_axis);#}
                {#var sh_series_list = JSON.stringify(data.sh_series_list);#}
                {#var sz_legend = JSON.stringify(data.sz_legend);#}
                {#var sz_x_axis = JSON.stringify(data.sz_x_axis);#}
                {#var sz_series_list = JSON.stringify(data.sz_series_list);#}

                var sh_legend = data.sh_legend;
                var sh_x_axis = data.sh_x_axis;
                var sh_series_list = data.sh_series_list;
                var sz_legend = data.sz_legend;
                var sz_x_axis = data.sz_x_axis;
                var sz_series_list = data.sz_series_list;

                var legend = ['open','close']
                var chart1 = echarts.init(document.getElementById('chart1'));
                var option1 = {
                    legend: {
                        {#data: sh_legend,#}
                        data: legend,
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: sh_x_axis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: sh_series_list,
                };
                chart1.setOption(option1);

                var chart2 = echarts.init(document.getElementById('chart2'));
                var option2 = {
                    legend: {
                        {#data: sz_legend,#}
                        data: legend,
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: sz_x_axis

                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: sz_series_list,
                };
                chart2.setOption(option2);
            },
            error: function () {
                alert("Failed to get data.");
            }
        });
    });
</script>

</body>
</html>


